我們今天要學習的是 Vue 內建的 <transition> 元件，它能讓你的元素或元件在進入（enter）與離開（leave）時，加上漂亮的動畫效果 ✨。

學習重點

1.什麼是過場效果（Transition）

• 頁面上某個元素「出現」或「消失」時，自然不應該只是瞬間閃現。
• Vue 提供 <transition> 包住元素，讓它自動加上進出場動畫。
• 常用在彈窗、下拉選單、切換訊息、切頁等。

2.Vue <transition> 的基本用法

<transition name="fade">
  <p v-if="show">Hello 星雲動畫 ✨</p>
</transition>

對應的 CSS：

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

⭢當 show = true，文字淡入；當 show = false，文字淡出。

3.常用的 class 流程

4.應用情境

• 讓訊息淡入淡出
• Modal / 彈窗彈出時有縮放效果
• 切換頁面加上「星雲」般的轉場

5.範例：淡入淡出動畫

<template>
  <button @click="show = !show">切換訊息</button>

  <transition name="fade">
    <p v-if="show">🌌 歡迎進入星雲動畫！</p>
  </transition>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.8s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

⭢點按鈕，文字會「慢慢出現 / 消失」。

現在我們可以發揮創意，讓我們畫面活起來了～！

參考資源
https://vuejs.org/guide
https://www.runoob.com/vue3